<template>
    <div>
        <div class="container main">
            <div class="m-page">
                <div class="m-steps">
                    <steps :step="step"></steps>
                </div>
                <div class="m-tip">
                    订单创建成功，请您尽快支付。超过72个小时未支付，订单将自动取消。您在未验收服务前，您所支付的款项将暂存在熙重电子科技。在您验收服务完毕后，熙重电子科技才会将款项支付给服务商。
                    <div class="tip-cancal">取消订单</div>
                </div>
                <div class="m-serviceInfo">
                    <div class="s-title">
                        <div class="title-text">服务信息</div>
                        <div class="title-tip">您选择购买如下企业服务，请确认服务内容以及价格</div>
                    </div>
                    <div class="s-order">
                        <table>
                            <tr>
                                <th>订单号</th>
                                <th>供应商</th>
                                <th>商品/服务详情</th>
                                <th>单价</th>
                                <th>数量</th>
                                <th>实付金额</th>
                            </tr>
                            <tr>
                                <td>FW201904190001</td>
                                <td>熙重电子科技有限公司</td>
                                <td>名称：创新政策咨询服务 地区：火炬湖里园区 服务性质：一次性服务</td>
                                <td>￥0.01</td>
                                <td>
                                    <el-input-number v-model="num" @change="handleChange" :min="1" label="描述文字" :disabled="true"></el-input-number>
                                </td>
                                <td>￥0.01</td>
                            </tr>
                        </table>
                    </div>
                </div>
                <div class="m-btns">
                    <span>
                        <button @click="CardTransfer">银行转账付款</button>
                    </span>
                    <span>
                        <button @click="other_way()">其他支付方式</button>
                    </span>
                    <span>
                        <button class="print" @click="go_detail()">打印订单</button>
                    </span>
                </div>
                <!-- 银行卡转账的弹窗 -->
                <totas v-show="isTotas" @totas="totas" :title="'收款账户信息'">
                    <div class="totas-text">
                        <p>户名：熙重电子科技有限公司</p>
                        <p>账号：62229 XXXX XXXXXXX</p>
                        <p>开户行：兴业银行湖里支行</p>
                        <p class="tip">注！转账时请务必填写订单号：FW201904190001</p>
                    </div>
                </totas>

                <!-- 其他付款方式的弹窗 -->
                <totas v-show="isTotas2" @totas="totas2" :title="'收款账户信息'" :hidnbtn="true">
                    <div class="totas2-content">
                        <div class="c-img">
                            <img src="../../../static/images/otherWay.png" alt="">
                        </div>
                        <p>其他线上支付方式正在悄悄进化...</p>
                        <div class="c-tip">完成后，将第一时间通知您！</div>
                    </div>
                </totas>
            </div>
        </div>
        
    </div>
</template>
<script>
import steps from '../../views/supermarket/Steps';
import headlogin from '../../views/localPage/headlogin';
import totas from '../../views/supermarket/totas1'
export default {
    data(){
        return{
            step:1,//步骤
            num: 1,//数量
            isTotas:false,//是否显示银行卡转账弹窗
            isTotas2:false,//是否显示其他付款方式弹窗
        }
    },
    methods:{
        // 导航栏
        getItme: function(item, index) {
            this.cur = index;
            switch(index)
            {
                case 0:
            
                this.$router.push({ path:'/ServiceSupermarket/Home'})
                break;
                case 1:
        
                this.$router.push({ path:'/ServiceSupermarket/GatheringCenter'})
                break;
                case 2:
            
                this.$router.push({ path:'/ServiceSupermarket/ServiceOrganization'})
                break;
                case 3:
                
                this.$router.push({ path:'/ServiceSupermarket/ServiceConsultant'})
                break;
                case 4:
                
                this.$router.push({ path:'/ServiceSupermarket/About'})
                break;
            }
        },
        //数量改变
        handleChange(value) {
            console.log(value);
        },
        //点击打印
        go_detail(){
            this.$router.push({path:'/ServiceSupermarket/OrderDetail'})
        },
        //点击银行卡转账弹窗的确定 取消
        totas(state){
            console.log(state);//true位确定  false位关闭
            this.isTotas = false;
        },
        //点击银行卡转账
        CardTransfer(){
            this.isTotas = true;
        },
        //其他付款方式
        other_way(){
            this.isTotas2=true;
        },
        //点击其他付款方式弹窗
        totas2(state){
            this.isTotas2 = false;
        }
    },
    components:{
        steps,
        headlogin,
        totas
    }
}
</script>
<style lang="less" scoped>
.m-page{
    background: #F3F3F3;
    padding: 60px 20px 100px;
    color: #333333;
    font-family:MicrosoftYaHei;
    font-weight:400;
    .m-tip{
        margin-top: 50px;
        background: #fff;
        padding: 30px 40px 80px;
        font-size: 16px;
        line-height: 50px;
        position: relative;
        .tip-cancal{
            position: absolute;
            color: #1575F9;
            font-size: 20px;
            right: 40px;
            bottom: 30px;
        }
    }
    .m-serviceInfo{
        background: #fff;
        margin-top: 60px;
        padding-bottom: 60px;
        .s-title{
            padding: 30px 44px 40px;
            .title-text{
                font-size: 20px;
            }
            .title-tip{
                font-size: 16px;
                color: #666;
                margin-top: 30px;
            }
        }
        .s-order{
            &>table{
                width: 100%;
                text-align: center;
                font-size: 16px;
                color: #666666;
                tr{
                    th{
                        height: 64px;
                    }
                    td{
                        padding: 30px 15px;
                    }
                    &:first-child{
                        background: #E0E0E0;
                        
                    }
                }
            }
        }
    }
    .m-btns{
        margin-top: 60px;
        text-align: center;
        &>span{
            margin-right: 50px;
            button{
                background:linear-gradient(0deg,rgba(255,153,0,1),rgba(255,153,0,1));
                box-shadow:0px 3px 6px 0px rgba(0, 0, 0, 0.2);
                color: #fff;
                border: none;
                padding: 5px 15px;
                border-radius:4px;
                font-size: 16px;
                &.print{
                    background: #fff;
                    border: 1px solid #1575F9;
                    color: #333;
                }
            }
            &:last-child{
                margin-right: 0;
            }
        }
    }
    .totas-text{
        &>p{
            font-size: 16px;
            &.tip{
                font-size: 12px;
                color: #FE0000;
                margin: 30px 0 71px;
            }
        }
    }
    .totas2-content{
        &>p{
            color: #8CB1E2;
            font-size: 24px;
        }
        .c-tip{
            height: 32px;
            line-height: 32px;
            width: 260px;
            text-align: center;
            color: #fff;
            background: #8CB1E2;
            border-radius: 8px;
            margin: 60px auto 0;
        }
    }
}
</style>
